<!-- 周边商城列表组件 -->

<template>
	<div class="threePic">
		<h3>云南小米咖啡，来自高原的中国式醇香</h3>
		<div class="imglist">
			<span>
				<img src="../assets/imgs/thr_mg1.png" alt="">
			</span>
			<span>
				<img src="../assets/imgs/thr_mg2.png" alt="">
			</span>
			<span>
				<img src="../assets/imgs/thr_mg3.png" alt="">
			</span>
		</div>
		<p class="experience">
			<span>体验</span>
			<span>9999</span>
		</p>
	</div>
</template>

<script>
	export default {
		props: {
			operate: {
				type: Array,
			},
		},

		data() {
			return {

			};
		},


	}
</script>

<style scoped lang="less">
	@import "~styles/index.less";
	@import "~styles/variable.less";


	// 三张图模块
	.threePic {
		background: #ffffff;
		width: calc(100% - 30px);
		padding: 0px 15px 0 15px;
		border-bottom: 1px solid @border-color;

		h3 {
			font-size: 14px;
			font-weight: bold;
			width: 100%;
			text-align: left;
			padding: 20px 0 25px 0px;
			background: #ffffff;
		}

		.imglist {
			background: #ffffff;
			height: 75px;
			width: 100%;
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;

			span {
				margin: 0 5px;
				text-align: center;
				width: 100%;
				display: inline-block;
				display: inline-block;

				&:first-child {
					margin-left: 0px;
				}

				&:last-child {
					margin-right: 0px;
				}

				img {
					width: 100%;
					height: 100%;
					border-radius: 5px;
				}
			}
		}

		.experience {
			margin: 20px 10px;
			display: flex;
			justify-content: space-between;
			color: #cccccc;

			span {
				&:last-child {
					position: relative;
					top: 2px;

					&:after {
						position: absolute;
						content: '';
						width: 16px;
						height: 16px;
						left: -20px;
						top: -1px;
						background: url(../../assets/imgs/eye.svg);
						background-size: 100% 100%;
						vertical-align: middle;

					}
				}
			}
		}
	}
</style>
